<template>
	<div class="middle">
		<!-- 头部 -->
		<div class="top">
			<span class="teacher">教案管理 <i class="el-icon-arrow-right"></i></span>
			<span>创建教案</span>
			<span class="back" @click="back">返回</span>
		</div>
		<!-- 标题部分 -->
		<div class="create">
		   	教案名称:<el-input class="ipt" v-model="plan" placeholder="请输入教案名称"></el-input>
		   	上课班级：<template>
						<el-select class="class" v-model="classId" placeholder="请选择班级">
							<el-option v-for="item in classOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</template>
			  课时：<el-input class="ipt" v-model="classNum" placeholder="请输入课时"></el-input>
		   	教材类别:<template>
		   		  <el-select class="class" v-model="categoryId" placeholder="请选择教材类型">
		   			<el-option v-for="item in type_title" :key="item.value" :label="item.label" :value="item.value"></el-option>
		   		  </el-select>
		   		</template>
			<el-button  class="btn" type="primary" size="small" @click="submit">保存</el-button>
		</div>
		<!-- 主体部分-->
		<div class="text item">
			<form @submit.prevent="submit" id="test">
				<input type="hidden" name="one_img" :value="img">
				<input type="hidden" name="two_img" :value="img2">
				<input type="hidden" name="three_img" :value="img3">
				<el-collapse v-model="activeName">
				  <el-collapse-item title="基本信息" name="1" class="text-title">
					<div>
						<h4><span class="circle"></span>教学内容</h4>
						<textarea name="contents" rows="5" cols="186" style= "background:transparent"></textarea>
					</div>
					<div>
						<h4><span class="circle"></span>场地器材</h4>
						<textarea name="equipment" rows="5" cols="186" style= "background:transparent"></textarea>
					</div>
					<div>
						<h4><span class="circle"></span>教学目标</h4>
						<textarea name="target" rows="5" cols="186" style= "background:transparent"></textarea>
					</div>
					<div>
						<h4><span class="circle"></span>负荷目标</h4>
						<textarea name="load_target" rows="5" cols="186" style= "background:transparent"></textarea>
					</div>
					<div>
						<h4><span class="circle"></span>教学重点</h4>
						<textarea name="teaching_emphasis" rows="5" cols="186" style= "background:transparent"></textarea>
					</div>
					<div>
						<h4><span class="circle"></span>教学难点</h4>
						<textarea name="difficulty" rows="5" cols="186" style= "background:transparent"></textarea>
					</div>
					<div>
						<h4><span class="circle"></span>安全措施</h4>
						<textarea name="security" rows="5" cols="186" style= "background:transparent"></textarea>
					</div>
				  </el-collapse-item>
				  <el-collapse-item title="教学阶段-开始部分" name="2">
					<div class="someTime">
						<span class="time">总时长:</span>
						<input name="one_count_minute" type="text" class="title">
						<span class="time">分钟</span>
					</div>
					<div class="addModel" @click ="addModel"><i class="el-icon-circle-plus"></i>添加模块</div>
					<div :id="first+a" v-for="(a,index1) in num" :key="index1">
						<div class="removeModel" @click ="removeModel(a)"><i class="el-icon-circle-close"></i>删除模块</div>
						<div id="start">
							<div class="div_child">
								<div>
									<h4 class="text-content">标题</h4>
									<input name="one_title[]" type="text" class="title">
								</div>
								<div>
									<h4><span class="circle"></span>教学内容</h4>
									<textarea name="one_contents[]" cols="186" rows="5" style= "background:transparent"></textarea>
								</div>
								<div>
									<h4><span class="circle"></span>教师活动</h4>
									<textarea name="one_activity[]" rows="5" cols="186" style= "background:transparent"></textarea>
								</div>
								<div>
									<h4><span class="circle"></span>学生活动</h4>
									<textarea name="one_s_activity[]" rows="5" cols="186" style= "background:transparent"></textarea>
								</div>
								<div v-if="a != 1?false:true">
									<h4><span class="circle"></span>组织形式</h4>
									<div>
										<el-upload
											:headers="header"
											:action="imgPath"
											list-type="picture-card"
											:on-preview="handlePictureCardPreview"
											:on-remove="handleRemove"
											:limit ='1'
											:on-success="success">
											<i class="el-icon-plus"></i>
										</el-upload>
										<el-dialog :visible.sync="dialogVisible">
											<img width="100%" :src="dialogImageUrl" alt="">
										</el-dialog>
									</div>
									<input type="hidden" name="one_img" :value="img">
									<!-- <div class="tupian2" id="one_upload_img" style="display: none;"><img :src="img"/></div> -->
								</div>
							</div>
						</div>
					</div>
				  </el-collapse-item>
				  <el-collapse-item title="教学阶段-准备部分" name="3">
					<div class="someTime">
					  	<span class="time">总时长:</span>
					  	<input name="two_count_minute" type="text" class="title">
					  	<span class="time">分钟</span>
					</div>
					<div class="addModel" @click ="addModel2"><i class="el-icon-circle-plus"></i>添加模块</div>
					<div id="preparation" :id="second+b" v-for="(b,index1) in num2" :key="index1">
						<div class="removeModel" @click ="removeModel2(b)"><i class="el-icon-circle-close"></i>删除模块</div>
						<div>
							<h4 class="text-content">标题</h4>
							<input name="two_title[]" type="text" class="title">
						</div>
						<div>
							<h4><span class="circle"></span>教学内容</h4>
							<textarea name="two_contents[]" cols="186" rows="5" style= "background:transparent"></textarea>
						</div>
						<div>
							<h4><span class="circle"></span>教师活动</h4>
							<textarea name="two_activity[]" rows="5" cols="186" style= "background:transparent"></textarea>
							<!--<div contenteditable="true" v-html="item.two_activity"></div>-->
						</div>
						<div>
							<h4><span class="circle"></span>学生活动</h4>
							<textarea name="two_s_activity[]" rows="5" cols="186" style= "background:transparent"></textarea>
						</div>
						<div v-if="b != 1?false:true">
							<h4><span class="circle"></span>组织形式</h4>
							<div>
								<el-upload
									:headers="header"
									:action="imgPath"
									list-type="picture-card"
									:on-preview="handlePictureCardPreview"
									:on-remove="handleRemove"
									:limit ='1'
									:on-success="success2">
									<i class="el-icon-plus"></i>
								</el-upload>
								<el-dialog :visible.sync="dialogVisible">
									<img width="100%" :src="dialogImageUrl" alt="">
								</el-dialog>
							</div>
						</div>
					</div>
				  </el-collapse-item>
				  <el-collapse-item title="教学阶段-基本部分" name="4">
					<div class="someTime">
						<span class="time">总时长:</span>
						<input name="three_count_minute" type="text" class="title">
						<span class="time">分钟</span>
					</div>
					<div class="addModel" @click ="addModel3"><i class="el-icon-circle-plus"></i>添加模块</div>
					<div id="basic" :id="third+c" v-for="(c,index1) in num3" :key="index1">
						<div class="removeModel" @click ="removeModel3(c)"><i class="el-icon-circle-close"></i>删除模块</div>
						<div>
							<h4 class="text-content">标题</h4>
							<input name="three_title[]" type="text" class="title">
						</div>
						<div>
							<h4><span class="circle"></span>教学内容</h4>
							<textarea name="three_contents[]" cols="186" rows="5" style= "background:transparent"></textarea>
						</div>
						<div>
							<h4><span class="circle"></span>教师活动</h4>
							<textarea name="three_activity[]" rows="5" cols="186" style= "background:transparent"></textarea>
						</div>
						<div>
							<h4><span class="circle"></span>学生活动</h4>
							<textarea name="three_s_activity[]" rows="5" cols="186" style= "background:transparent"></textarea>
						</div>
						<div v-if="c != 1?false:true">
							<h4><span class="circle"></span>组织形式</h4>
							<div class="tupian">
								<el-upload
									:headers="header"
									:action="imgPath"
									list-type="picture-card"
									:on-preview="handlePictureCardPreview"
									:on-remove="handleRemove"
									:limit ='3'
									:on-success="success3">
									<i class="el-icon-plus"></i>
								</el-upload>
								<el-dialog :visible.sync="dialogVisible">
									<img width="100%" :src="dialogImageUrl" alt="">
								</el-dialog>
							</div>
						</div>
					</div>
				  </el-collapse-item>
				  <el-collapse-item title="教学阶段-结束部分" name="5">
					<div>
						<div class="someTime">
							<span class="time">总时长:</span>
							<input name="end_count_minute" type="text" class="title">
							<span class="time">分钟</span>
						</div>
						<div>
							<h4><span class="circle"></span>教学内容</h4>
							<textarea name="four_contents" cols="186" rows="5" style= "background:transparent"></textarea>
						</div>
						<div>
							<h4><span class="circle"></span>教师活动</h4>
							<textarea name="four_activity" rows="5" cols="186" style= "background:transparent"></textarea>
						</div>
						<div>
							<h4><span class="circle"></span>学生活动</h4>
							<textarea name="four_s_activity" rows="5" cols="186" style= "background:transparent"></textarea>
						</div>
					</div>
				  </el-collapse-item>
				</el-collapse>
			</form>
		</div>
	</div>
</template>
<script>
	export default{
		data() {
			return {
				 imgPath:'http://pcprograme.tijian121.com/api/common/t_plan_upload_img',
				//imgPath:'http://192.168.1.118/common/t_plan_upload_img',
				num:1,
				a:1,
				first:'first',
				second:'second',
				num2:1,
				b:1,
				third:'third',
				num3:1,
				c:1,
				baseUrl:'http://pcprograme.tijian121.com/',
				header: {
				    'token': window.sessionStorage.getItem('token')
				},
				plan:'',//教案名称
				classId:'',//上课班级id
				classOptions:[],//存放上课班级
				classNum:'',//课时
				//classNumId:'',//课时id
				//classNumOptions:[],//存放课时
				activeName:['1','2','3','4','5'],//折叠面板
				dialogImageUrl: '',//图片上传
				dialogVisible: false,//图片上面板
				basic:[],//存放基本信息
				contentList:[],//存放教案
				categoryId:'',
				type_title:[],//存放教案类别
				img:'',//上传成功后的图片地址
				img2:'',
				img3:'',
			}
		},
		methods: {
			// http://pcprograme.tijian121.com/api/t_plan/addTeacherPlan
			//保存文件
			submit(){
				var token = window.sessionStorage.getItem('token')
				var formParam = $('#test').serialize()
				$.ajax({
					headers:{'token':token},
					url:'http://pcprograme.tijian121.com/api/t_plan/addTeacherPlan',
					data:'plan_type_id='+this.categoryId+'&motion='+this.plan+'&class_info='+this.classId+'&'+formParam+'&class_hour='+this.classNum,
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					success:function(data){
						if(data.code == 200) {
							alert(data.msg)
						}
						window.history.go(-1)
					},
					error:function(xhr,type,errorThrown){

					}
				});
			},
			//班级数据
			getClassInfo(){
				this.$http.post('/api/course_plan/getTeacherClassInfo')
					.then(res=>{
						res.data.class_info.map(item=>{
							var obj ={}
							obj.label =item.get_grade.grade_title + item.class_name
							obj.value =  item.get_grade.id +'|'+item.id
							this.classOptions.push(obj)
						})
					})
			},
			//获取教案类别
			//获取搜索信息
			getSearchInfo(){
				this.$http.post('/api/teacher_plan/getSearchInfo')
					.then(res=>{
						res.data.type_title.map(item =>{
							var obj ={}
							obj.label = item.title
							obj.value = item.id
							this.type_title.push(obj)
						})
					})
			},
			//返回上一页
			back(){
				this.$router.push({name:'plan'})
			},
			//上传图片
			handleRemove(file, fileList) {
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			//开始部分添加模块
			addModel(){
				this.num++;
				this.i++;
			},
			removeModel(i){
				$('#first'+i).empty()
			},
			//准备部分
			addModel2(){
				this.num2++;
				this.a++;
			},
			removeModel2(a){
				$('#second'+a).empty()

			},
			//基本部分
			addModel3(){
				this.num3++;
				this.c++;
			},
			removeModel3(c){
				$('#third'+c).empty()

			},
			//上传图片成功
			success(response,file, fileList){
				this.img = response.img
				//if(response.img) {

// 					this.img =$("input[name=one_img]").val();
// 					this.img +=response.img+','
// 					if(this.img.length >0){
// 						this.img = this.img.substr(0,this.img.length-1)
// 					}
// 					this.img.split(',')

// 					var imgs = []
// 					var img = ''
// 					img = $("input[name=one_img]").val().split(",")
// 					img = img.join(',');
// 					img = response.img
// 					imgs.push(img)
				//}
			},
			success2(response,file, fileList){
				this.img2 = response.img
			},
			success3(response,file, fileList){
				this.img3 = response.img
			}
		},
		created() {
			this.getClassInfo()
			this.getSearchInfo()
		}
	}
</script>

<style>
	.el-main {
		padding: 0;
	}
	.middle {
	    height: 100%;
	    width: 100%;
	    background-repeat:repeat;
	    background-size: contain;
	    background-position: center;
	    background-attachment: fixed;
	    z-index: -1;
	}
	.el-dialog__body {
		padding: 0px 20px;
	}
	.el-card__body {
		padding: 0 20px !important;
	}
	.el-collapse-item__header{
	 	height: 30px !important;
	 	background-color:#9cbf83 !important;
	 	padding-left: 20px !important;
	 	color: #000000 !important;
	 	font-weight: 700 !important;
	 	font-size: 16px !important;
	  }
</style>
<style lang="less" scoped>
	.middlebg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		background: url(../../assets/image/bg-img.png) no-repeat center;
		background-size: 100%;
	}
	.top {
		height: 50px;
		line-height: 50px;
		background-color: #dbdbdb;
		position: relative;
		.teacher {
			display: inline-block;
			background: #00b02d;
			padding:0 15px;
			color: #fff;
		}
		.addteacher {
			display: inline-block;
			background: #3A8EE6;
			height: 24px;
			line-height: 24px;
			position: absolute;
			right: 180px;
			top: 10px;
			padding: 3px 15px;
			font-size: 14px;
			border-radius: 5px;
			color: #fff;
			cursor: pointer;
		}
		.back {
			position: absolute;
			right: 0;
			background: #9cbf83;
			padding: 0 15px;
			border-radius: 3px;
			color: #fff;
			cursor: pointer;
		}
	}
	.create {
		margin: 10px;
		.ipt{
			width: 200px;
		}
		.btn {
			margin-left:10px;
		}
	}
	.text {
		padding: 0 20px;
		h4 {
			padding:5px 0;
			.circle {
				display: inline-block;
				width: 8px;
				height: 8px;
				background: #666666;
				border-radius: 4px;
				margin-right:10px;
			}
		}
		.addModel {
			margin: 10px;
			font-size: 18px;
			cursor: pointer;
			i {
				color:palevioletred;
			}
		}
		.removeModel {
			margin: 10px;
			font-size: 18px;
			cursor: pointer;
			i {
				color:#666;
			}
		}
		.text-content {
			color: #00b02d;
			font-weight: 700;
			display: inline-block;
			padding: 10px 0;
			font-size: 16px;
		}
		.title {
			height: 30px;
		}
		.someTime {
			.time {
				display: inline-block;
				font-size: 20px;
				font-weight: 600;
				margin-top: 10px;
			}
			.title {
				width: 50px;
				height: 25px;
			}
		}
		#start{
			.div_child {
				.text-content {
					color: #00b02d;
					font-weight: 700;
					display: inline-block;
					padding: 10px 0;
					font-size: 16px;
				}
				.title {
					height: 30px;
				}
				textarea {
					width: 98%;
					padding: 5px;
					overflow-y:visible;
				}
				.tupian {
					width: 200px;
					img {
						width: 200px;
					}
				}
			}
			.div_child1 {
				.text-content {
					color: #00b02d;
					font-weight: 700;
					display: inline-block;
					padding: 10px 0;
					font-size: 16px;
				}
			}
		}
		#preparation {
			.text-content {
				color: #00b02d;
				font-weight: 700;
				display: inline-block;
				padding: 10px 0;
				font-size: 16px;
			}
			.title {
				height: 30px;
			}
		}

	}
</style>
